<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主题景区推荐管理</title>
<%@include file="../header.jsp" %>
<!-- zTree -->
<script type="text/javascript" src="/js/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css" type="text/css">


<script type="text/javascript">

	
	var IDMark_A = "_a";
	var senceAdviceStr = new Array();
	var senceAdviceTargetStr = new Array();
	var delAdviceTargetStr = new Array();
	var setting0 = {  
	        isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
	        treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
	        treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
	        showLine : true,                  //是否显示节点间的连线  
	        checkable : true,                  //每个节点上是否显示 CheckBox  
	        callback : {
	        	onClick : onClickTarget,
				onCheck : onClickTarget
	        }
	 };
	var setting = {  
	        isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
	        treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
	        treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
	        showLine : true,                  //是否显示节点间的连线  
	        checkable : true,                  //每个节点上是否显示 CheckBox  
	        callback : {
	        	onClick : onClickTarget,
				onCheck : onClickTarget
	        }
	 };
	//自动执行
	$(function(){
		var zNodes = ${trees};
		var zNodesTarget = ${treesTarget};
		initTree(zNodes);
		initTreeTarget(zNodesTarget)
	});
	//初始化树
	function initTree(zNodes) {
	$.fn.zTree.init($("#treeDemo"), 
		{
			view: {
				addDiyDom: addDiyDom
			}, 
			data:{
				simpleData:{
					enable:true
				}
			},
			check : {enable : true 
				 }, 
			callback : {   
				onClick : onClick,
				onCheck : onClick
			},
			
		},
		 zNodes);
	}
	function initTreeTarget(zNodesTarget) {
		$.fn.zTree.init($("#treeAdvice"), 
			{
				view: {
					addDiyDom: addDiyDom
				}, 
				data:{
					simpleData:{
						enable:true
					}
				},
				check : {enable : true 
					 }, 
				callback : {   
					onClick : onClickTarget,
					onCheck : onClickTarget
				},
				
			},
			zNodesTarget);
		 
		senceAdviceTargetStr = zNodesTarget;
		delAdviceTargetStr = new Array();
		}
	//addDiyDom
	function addDiyDom(treeId, treeNode) {
			if (treeNode.parentNode && treeNode.parentNode.id!=2) return;
			var aObj = $("#" + treeNode.tId + IDMark_A);
	}

	function onClick(event, treeId, treeNode, clickFlag) {  
		//选中(true)和取消(false)
		var judge = true;
		for (var i = 0; i < senceAdviceStr.length; i ++) {
			var tempObj = senceAdviceStr[i];
			if (tempObj.id == treeNode.id) {
				senceAdviceStr.splice(i,1);
				judge = false;
			}
		}
		if (judge == true) {
			senceAdviceStr.push(treeNode);
			//senceAdviceStr[senceAdviceStr.length-1].checked = false;
		}

		//alert("id:"+treeNode.id+"treeId:" + treeId + "   name:" + treeNode.checked + "    level:"    + treeNode.level + "   tid:" + treeNode.tId + "   parentTId:"      + treeNode.parentTId + "   children:" + treeNode.children);  
	}
	
	function onClickTarget(event, treeId, treeNode, clickFlag) {  
		//选中(true)和取消(false)
		//要移除的值senceAdviceTargetStr
		var judge = true;

		judge = deleteNode(senceAdviceTargetStr,delAdviceTargetStr,treeNode);

		if (judge == true) {
			senceAdviceTargetStr.push(treeNode);
			deleteNode(delAdviceTargetStr,senceAdviceTargetStr,treeNode);
		}
		//alert("id:"+treeNode.id+"treeId:" + treeId + "   name:" + treeNode.name + "    level:"    + treeNode.level + "   tid:" + treeNode.tId + "   parentTId:"      + treeNode.parentTId + "   children:" + treeNode.children);  
	}
	//添加主题
	function addTheme() {
		//从数据库增加该对象中的数据senceAdviceStr
		var data = "[";
		data += addNodeId(senceAdviceStr);
		data = data.substring(0, data.length - 1) +"]"
		
		$.ajax({type:"post",
			url:"/advicedSSCat/add",
			data:"data="+ data,
			dataType:"json"
		}).done(function(data) {
			alert(data.msg);
			if(data.isSuccess) {
		
			}
		});
		senceAdviceTargetStr = senceAdviceStr;
		removeChecked(senceAdviceStr);
		//初始化树
		initTreeTarget(senceAdviceStr);
		//$.fn.zTree.init($("#treeAdvice"),setting,senceAdviceStr);
	}
	//删除主题
	function delTheme() {
		//从数据库删除该对象中的数据delAdviceTargetStr
		var data = "[";
		data += addNodeId(delAdviceTargetStr);
		data = data.substring(0, data.length - 1) +"]"

		$.ajax({type:"post",
			url:"/advicedSSCat/delete",
			data:"data="+ data,
			dataType:"json"
		}).done(function(data) {
			alert(data.msg);
			if(data.isSuccess) {
		
			}
		});
		//初始化树
		initTreeTarget(senceAdviceTargetStr);
		//$.fn.zTree.init($("#treeAdvice"),setting,senceAdviceStr);
	}
	function addNodeId(tarstr) {
		var tempData = "";
		for (var i = 0; i < tarstr.length; i ++) {
			tarstr[i].checked = false;
			tempData += tarstr[i].id;
			tempData += ",";
			var childrenTemp = tarstr[i].children;
 			if (childrenTemp !=undefined && childrenTemp.length > 0){
 				tempData += addNodeId(childrenTemp);
 			}
		}
		return tempData;
	}
	
	function removeChecked(tarstr) {

		for (var i = 0; i < tarstr.length; i ++) {
			tarstr[i].checked = false;
			var childrenTemp = tarstr[i].children;
 			if (childrenTemp !=undefined && childrenTemp.length > 0){
 				removeChecked(childrenTemp);
 			}
		}
	}
	
	function deleteNode(tarstr,delStr,treeNode) {
		var tempJudge = true;
		for (var i = 0; i < tarstr.length; i ++) {
			var tempObj = tarstr[i];
			var childrenTemp = tarstr[i].children;

 			if (childrenTemp !=undefined && childrenTemp.length > 0){
 				deleteNode(tarstr[i].children,delStr,treeNode);
 			}
			if (childrenTemp ==undefined && tempObj.id == treeNode.id) {
				tarstr.splice(i,1);
				tempJudge = false;
				delStr.push(treeNode);
			}
		}
		return tempJudge;
	}

	function addCat() {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var cats = zTree.getCheckedNodes(true);
		var array = new Array();
		$.each(cats, function(i, n){
			array.push(n.id);
		});
		var ids = array.join(",");
		console.info(ids);
		$.ajax({
			url:"/advicedSSCat/add",
			typoe:"post",
			data:{ids:ids},
			dataType:"json"
		}).done(function(data){
			alert(data.msg);
			if(data.isSuccess) 
				window.location = "/advicedSSCat/index";
		})
	}
	
	function delCat() {
		var zTree = $.fn.zTree.getZTreeObj("treeAdvice");
		var cats = zTree.getCheckedNodes(true);
		var array = new Array();
		$.each(cats, function(i, n){
			array.push(n.aid);
		});
		var ids = array.join(",");
		$.ajax({
			url:"/advicedSSCat/delete",
			typoe:"post",
			data:{ids:ids},
			dataType:"json"
		}).done(function(data){
			alert(data.msg);
			if(data.isSuccess) 
				window.location = "/advicedSSCat/index";
		})
	}
	

</script>
<style type="text/css">
	.ztree li span.demoIcon{padding:0 2px 0 10px;}
	.ztree li span.button.icon-add{margin:0; background: url(../../../../images/exticons/icon/add.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon-edit{margin:0; background: url(../../../../images/exticons/icon/pencil.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li span.button.icon-del{margin:0; background: url(../../../../images/exticons/icon/delete.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
	.ztree li a.curSelectedNode{text-decoration:none; }
</style>
</head>
<body>
   <div class="ch-container">
	<div class="row">
	    <div class="box col-md-4">
	        <div class="box-header well" data-original-title="">
	            <h2><i class="glyphicon glyphicon-tasks"></i>景区主题分类</h2>            
	        </div>
	        <div class="box-inner">
	       
	            <div class="box-content" style="min-height:600px;">
	                <ul id="treeDemo" class="ztree"></ul>
	            </div>
	        </div>
	    </div>
	    <!--/span-->
		<div class="box col-md-2">
			<div style="height:400px;line-height:400px;">
			
				<div  style="height:50px;margin-top:100px;">
					<button type="button" class="btn" data-toggle="button" onclick="addCat()">
						添加》》》
					</button>
				</div>
				<div style="height:50px;">
					<button type="button" class="btn" data-toggle="button" onclick="delCat()"> 
						《《《删除
					</button>
				</div>
				
			</div>
		
		</div>
	    <div class="box col-md-4" >
	        <div class="box-header well">
	            <h2><i class="glyphicon glyphicon-eye-open"></i> 景区主题推荐</h2>
	        </div>
	        <div class="box-inner" style="min-height:600px;height:600px;">
	            <div class="box-content" id="senceAdvice">
	                <ul id="treeAdvice" class="ztree"></ul>

	            </div>
	        </div>
	    </div>
 	 </div><!--/row-->
	</div>    
</body>
</html>